<template>
    <div>
        <div>pinia的基本使用</div>

        <div>
            <el-button @click="setUserInfo">设置userInfo</el-button>
            <el-button @click="resetUserInfo">清除userInfo</el-button>
        </div>

        <div>userStore</div>
        <div>{{userInfo.token}}</div>
        <div>{{userInfo.name}}</div>
        <div>{{userInfo.age}}</div>

        <div>{{userInfo.userInfo.token}}</div>
        <div>{{userInfo.userInfo.name}}</div>
        <div>{{userInfo.userInfo.age}}</div>
        <!--<div>{{test.arr}}</div>-->
    </div>
</template>

<script  setup lang="ts">
    import { useUserInfoStore } from '../../store/userInfo';
    import {storeToRefs} from "pinia";
    import { testStore } from '../../store/test';
    const userInfo = useUserInfoStore()
    // const {name,age,token} = storeToRefs(userInfo)   //解构 防止丢失响应式; 解构方法不需要使用storeToRefs 直接解构即可
    const test = testStore()
    console.log("userInfo",userInfo)
    console.log("test",test)

    const setUserInfo = ()=>{
        let info = {
            name:"wfs2",
            age:30,
            token:"tokens2"
        }
        userInfo.setUserInfo(info)
        // userInfo.$patch({
        //     userInfo:{
        //         name:"wfs2",
        //         age:userInfo.userInfo.age+1,
        //         token:"tokens2"
        //     }
        // })

    }

    const resetUserInfo = ()=>{
        userInfo.resetUserInfo()
        // 替换原state
        // userInfo.$patch({
        //     userInfo:{
        //         name:"wfs1",
        //         age:20,
        //         token:"tokens1"
        //     }
        // })
    }

</script>

<style scoped>

</style>